<!--分页没做-->
<template>
  <div class="body">
    <div id="pullrefresh" class="">
      <div class="" v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="10">
        <!-- <scroller class="scroller" :on-infinite="infinite"
          :on-refresh='refresh' ref='myscroller'
          > -->
        <ul class="mui-table-view-chevron" id="inner" v-if="assnList.length !== 0" >
          <li v-for="(item,index) in assnList" :key="index" class="todeList">
            <div class="boxShadow" @click="toDetail(item)">
              <div class="list">
                <div class="leftIcon" :style="{background: 'url(https://weyouth.vip/' + item.path + ')'}"></div>
                <div class="purple">{{item.name}}</div>
                <div class="onePurple">{{item.count}}位成員<span class="mopic"></span></div>
              </div>
            </div>
            <div class="line"></div>
          </li>
        </ul>
        <ul class="mui-table-view-chevron noData" v-else>
          <span>暂无数据</span>
        </ul>
        <!-- </scroller> -->
      </div>
    </div>
    <am-modal :is-show.sync="myActions" :width="320"  custom-class="modal-raduis">
      <am-modal-header custom-class="modal-head modal-bg">
        <span>請選擇您的群發對象</span>
      </am-modal-header>
      <am-modal-body custom-class="modal-body modal-bg">
        <div class="btn-content">
          <div>
            <button @click="toEmailActivity">
              <img src="../style/img/38.png" class="amx">
              活動對象
            </button>
          </div>
          <div>
            <button @click="toEmailPersonCheck">
              <img src="../style/img/39.png" class="amx">
              社團成員
            </button>
          </div>
        </div>
      </am-modal-body>
      <am-modal-footer custom-class="modal-footer">
        <div @click="close(1)">
          <span>取消</span>
        </div>
      </am-modal-footer>
    </am-modal>
    <am-modal :is-show.sync="myActions2" :width="320"  custom-class="modal-raduis">
      <am-modal-header custom-class="modal-head modal-bg">
        <span>請選擇您的群發對象</span>
      </am-modal-header>
      <am-modal-body custom-class="modal-body modal-bg">
        <div class="btn-content">
          <div>
            <button @click="toSmsActivity">
              <img src="../style/img/38.png" class="amx">
              活動對象
            </button>
          </div>
          <div>
            <button @click="toSmsPersonCheck">
              <img src="../style/img/39.png" class="amx">
              社團成員
            </button>
          </div>
        </div>
      </am-modal-body>
      <am-modal-footer custom-class="modal-footer">
        <div @click="close(1)">
          <span>取消</span>
        </div>
      </am-modal-footer>
    </am-modal>
  </div>
</template>

<script>
import { isLogin } from '@/api/login'
import { getSocietyList } from '@/api/society'
export default {
  name: 'AssnList',
  data () {
    return {
      page: 1,
      finalPage: 1,
      assnList: [],
      myActions: false,
      myActions2: false,
      sid: '',
      scrollerHeight: '600',
      busy: false
    }
  },
  created () {
    this.isLogin()
    this.loadList(this.page)
  },
  beforeRouteLeave (to, from, next) {
    var ele = document.querySelectorAll('.am-dimmer')
    ele.forEach(item => {
      item.style.position = 'relative'
    })
    next()
  },
  methods: {
    toEmailActivity () {
      this.$router.push('/activity_list?sid=' + this.sid + '#email_activity')
    },
    toEmailPersonCheck () {
      this.$router.push('/person_check?sid=' + this.sid + '#email')
    },
    toSmsActivity () {
      this.$router.push('/activity_list?sid=' + this.sid + '#sms')
    },
    toSmsPersonCheck () {
      this.$router.push('/person_check?sid=' + this.sid)
    },
    isLogin () {
      isLogin().then(res => {
        if (res.code === 0) {
          alert('请先登录')
          this.$router.push('/login')
        }
      })
    },
    sortByKey (array, key) {
      return array.sort(function (a, b) {
        var x = a[key]
        var y = b[key]
        // return ((x<y)?((x>y)?1:0):-1);
        return y - x
      })
    },
    loadList (page) {
      if (window.location.hash.split('#')[1] === 'more') {
        getSocietyList({
          page: page
        }).then(res => {
          this.assnList = this.assnList.concat(res.data.data)
        })
      } else {
        getSocietyList({
          page: page,
          uid: localStorage.getItem('uid')
        }).then(res => {
          this.finalPage = res.data.last_page
          this.assnList = this.assnList.concat(res.data.data)
          // console.log(this.assnList)
        })
      }
    },
    // TODO: 分页问题
    loadMore () {
      console.log(this.finalPage, this.page)
      if (this.finalPage >= this.page) {
        this.busy = true
        console.log(123123)
        this.page++
        this.loadList(this.page)
        setTimeout(() => {
        // 这里请求接口去拿数据，实际应该是调用一个请求数据的方法
          this.busy = false
          console.log(454545)
        }, 1000)
      } else {
        this.busy = false
      }
    },
    toDetail (li) {
      // TODO: 记得改hash值
      var param = (window.location.hash).split('#')[1]
      if (param === 'manager') {
        this.$router.push('/manage_society?sid=' + li.sid + '&count=' + li.count + '&name=' + li.name)
      } else if (param === 'sms') {
        // this.$router.push('/sms_server?sid=' + li.sid)
        this.myActions2 = true
        this.sid = li.sid
      } else if (param === 'email') {
        this.myActions = true
        this.sid = li.sid
        // this.$router.push('/email_server?sid=' + li.sid)
      } else if (param === 'activity') {
        this.$router.push('/activity_list?sid=' + li.sid)
      } else {
        this.$router.push('/assn_details?sid=' + li.sid)
      }
    },
    infinite () {
      this.page += 1
      var self = this
      setTimeout(() => {
        self.loadList(self.page)
        self.$refs.myscroller.finishInfinite(true)
      }, 1500)
    },
    refresh () {
      var self = this
      setTimeout(() => {
        self.$refs.myscroller.finishPullToRefresh()
      }, 1500)
    }
  }
}
</script>

<style type="text/css" scoped>
@import '../style/css/mui.min';
* {
  margin: 0;
  padding: 0;
  touch-action: pan-y;
}

.mui-content > .mui-table-view:first-child {
  margin-top: -1px;
}

.body {
  font-family: PingFangSC;
}
#inner {
  min-height: 700px;
  height: auto;
  overflow-y: auto;
  background:rgba(255,255,255,90%);
}
.amx {
  width: 28px;
  margin-right: 4px;
}

.am-modal-actions-group {
    margin: 10px;
}
.am-modal-dialog {
  border-radius: 10px;
}
.modal-bg {
  background: rgba(255, 201, 181, 1);
}
.modal-head {
  padding: 10px;
  font-size: 18px;
  color: rgba(119, 119, 119, 1);
  font-weight: 550;
}
.btn-content {
  width: 100%;
  margin: 0 auto;
  text-align: center;
  height: 200px;
  padding-top: 20px;
}
.btn-content button {
  border-radius: 30px;
  background: rgba(255, 201, 181, 1);
  padding: 10px;
  width: 200px;
  height: 50px;
  border: 2px solid rgba(119, 119, 119, 1);
  outline: none;
  margin-top: 10px;
  color: rgba(119, 119, 119, 1);
  font-weight: bold;
  font-size: 16px;
}
.modal-footer {
  width: 100%;
  text-align: center;
  font-size: 18px;
}
.modal-footer span {
  line-height: 44px;
  color: rgba(119, 119, 119, 1);
  font-weight: 550;
}
.todeList {
  list-style: none;
  margin: 0 auto;
  width: 90%;
  height: 65px;
  /* line-height: 50px; */
  /* border-bottom: 2px solid rgba(0, 0, 0, 0.1); */
}
.scroller {
  height: 100%;
  background: url(../style/img//bg-search-activity.png);
  background-size: cover;
}
.mui-content {
  background: white;
}

.list {
  height: 65px;
  background: rgba(255, 255, 255, 0.1);
  line-height: 65px;
}

.leftIcon {
  width: 44px;
  height: 44px;
  border-radius: 22px;
  margin: 16px 0 0 15px;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-position: center !important;
  float: left;
  padding-left: 10px;
}

.purple {
  font-size: 19px;
  float: left;
  line-height: 74px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 180px;
  padding-left: 10px;
}

.onePurple {
  line-height: 74px;
  float: right;
  font-size: 14px;
  color: grey;
}

.boxShadow {
  width: 100%;
  float: left;
  height: 74px;
}

.maplog {
  float: left;
  height: 10px;
  margin: 3px 3px 0 3px;
  width: 8px;
  background-image: url(../style/img/maplog.png);
  background-size: 100% 100%;
}

.mopic {
  margin: 33px 17px 0 7px;
  float: right;
  background-image: url(../style/img/sign.png);
  background-size: 100% 100%;
  width: 5px;
  height: 10px;
}

.mui-pull-caption {
  display: none !important;
}

.line {
  height: 2px;
  background: rgba(0, 0, 0, 0.1);
  width: 90%;
  margin-left: 5%;
  float: left;
}

.noData {
  text-align: center;
  line-height: 44px;
  color: grey;
}
</style>
